<template>
    <div class="container">
        <div class="tabCommonTitle">
            <span>标准文本</span>
        </div>
        <div class="addBTn" style="text-align:right;margin-bottom:20px;">
            <a-button :disabled="is_modify=='Y'?false:true" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="addText">上传附件</a-button>
        </div>
        <div class="tableList">
            <!-- <a-table :columns="columns" :data-source="data" :pagination="false" align="center">
                <span slot="operation" slot-scope="text, record">
                    <a>
                        <a-icon @click="handelUpdate(text, record)" type="edit" />
                        <a-icon @click="handelDelete(text, record)" type="delete"/>
                    </a>
                </span>
            </a-table> -->
            <a-table :data-source="data" :pagination="false" align="center">
                <a-table-column key="xh" title="序号" data-index="xh" />
                <a-table-column key="fjWjMc" title="附件名称" data-index="fjWjMc" />
                <a-table-column key="fileStatus" title="上传状态" data-index="fileStatus"/>
                <a-table-column key="operation" title="操作">
                    <template slot-scope="text, record">
                        <a>
                            <img style="width:18px;height:18px;margin-right:22px;" @click="handelPreview(text, record)" src="@/assets/img/yulan.png" alt="">
                            <img style="width:18px;height:18px;margin-right:11px;" @click="handelUpdate(text, record)" src="@/assets/img/bianji.png" alt="">
                            <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="handelDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                        </a>
                    </template>
                </a-table-column>
            </a-table>
        </div>
        <a-modal
            v-drag-modal
			title="附件"
            class="enclosure_modal"
			:visible="visible"
            :maskClosable="false"
            :width="500"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <a-button :disabled="is_modify=='Y'?false:true" key="submit" type="primary" @click="handleSubmit">保存</a-button>
            </template>
			<a-form :form="form" @submit="handleSubmit" >
				<a-form-item label="附件名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-decorator="[
						'fileName',
						{rules: [{ required: true, message: '请输入附件名称' }]}
					]" placeholder="附件名称" />
				</a-form-item>
				<a-form-item label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 12 }">
					<!-- <a-input class="file_input" v-decorator="[
						'file',
						{rules: [{ required: true, message: '请上传文件' }]}
					]" type="file"/> -->
                    <a-upload
                        accept=".pdf"
                        :customRequest="customRequest"
                        :showUploadList="{showRemoveIcon:false}"
                        :fileList="fileList"
                        v-decorator="[
                            'file',
                                {rules: [{ required: fileFlag, message: '请上传文件' }]}
                            ]"
                            name="file"
                        >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"> <a-icon type="upload" /> 上传文件 </a-button>
                    </a-upload>
				</a-form-item>
			</a-form>
		</a-modal>
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf"></testPdf>
    </div>
</template>

<script>
import {
    // 创新奖申报-标准文本列表
    cxjsbBzwbList,
    // 创新奖申报-标准文本保存和修改
    cxjsbBzwbAdd,
    // 创新奖申报-标准文本详情
    cxjsbGetBzwb,
    // 创新奖申报-标准文本删除
    cxjsbBzwbDelete
} from "@/api/shenbao";
import testPdf from '@/views/declarationSystem/declare/testPdf';

const columns = [
    {
        title: '序号',
        dataIndex: 'xh',
        key: 'xh',
    },
    {
        title: '附件名称',
        key: 'fjWjMc',
        dataIndex: 'fjWjMc'
    },
    {
        title: '上传状态',
        key: 'fileStatus',
        dataIndex: 'fileStatus'
    },
    {
        title: '操作',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
    }
];

const data = [];
export default {
    name: 'standardText',
    props: ['is_modify'],
    data() {
        return {
            visible: false,
            confirmLoading: false,
            type: 1,
            file: '',
            fileList: [],
            form: this.$form.createForm(this, { name: 'coordinated' }),
            data,
            columns,
            detailInfo: {},
            fileFlag: true,
            cxj_cxj_id: '',
            showpdf: false,
            filePath: '',
        }
    },
    components: {
        testPdf
    },
    mounted(){
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.onaxios();
    },
    methods: {
        onaxios(){
            cxjsbBzwbList({
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.data = data.result;
                    this.data.map((item, index)=>{
                        item.xh = index+1;
                        if(item.filePath){
                            item.fileStatus = "上传成功"
                        } else {
                            item.fileStatus = "上传失败"
                        }
                    })
                }
            })
        },
        getDetailInfo(id){
            cxjsbGetBzwb({
                id,
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.detailInfo = data.result;
                    // this.file = this.detailInfo.filePath;
                    this.form.setFieldsValue({
                        fileName: this.detailInfo.fjWjMc,
                        // file: this.detailInfo.filePath
                    })
                    let fileName = data.result.filePath.split('/');
                    this.fileList.push({  
                        uid: data.result.id,    // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突  
                        name: fileName[2],   // 文件名  
                        status: 'done', // 状态有：uploading done error removed  
                        response: '{"status": "success"}', // 服务端响应内容  
                    })
                }
            })
        },
        handelUpdate(text, record){
            this.type = 2;
            this.visible = true;
            this.fileFlag = false;
            this.getDetailInfo(record.id);
        },
        handelPreview(text, record) {
            this.showpdf = !this.showpdf;
            this.filePath = record.filePath;
        },
        handelDelete(text, record){
            const self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsbBzwbDelete({
                        cxj_cxj_id: self.$route.query.cxj_cxj_id,
                        id: record.id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功');
                            self.onaxios();
                        } else {
                            self.$message.error(data.message)
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.destroyAll();
                },
            });
        },
        addText() {
            this.visible = true;
            this.type = 1;
            this.fileFlag = true;
        },
        handleCancel() {
            this.visible = false;
            this.form.resetFields();
            this.fileList = [];
        },
        destroyAll() {
            this.$destroyAll();
        },
        customRequest(file){
            let fileList = [...this.fileList, file.file]
            this.fileList = fileList.slice(-1);
            this.file = this.fileList[0];
            console.log('文件列表',this.fileList)
            return false;
        },

        handleSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    let formData = new FormData();
                    // 成果id
                    formData.append('cxj_cxj_id', this.$route.query.cxj_cxj_id);
                    // 附件名称
                    formData.append('fjWjMc', values.fileName);
                    if (this.type == 1) {
                        // 标准文本id
                        formData.append('id', '');
                        // 上传文件
                        formData.append('file', this.file);
                    } else {
                        formData.append('id', this.detailInfo.id);
                        formData.append('bz1', this.detailInfo.bz1);
                        formData.append('bz2', this.detailInfo.bz2);
                        formData.append('bz3', this.detailInfo.bz3);
                        formData.append('createBy', this.detailInfo.createBy);
                        formData.append('createTime', this.detailInfo.createTime);
                        formData.append('cxjCxjId', this.detailInfo.cxjCxjId);
                        formData.append('fileName', this.detailInfo.fileName);
                        formData.append('filePath', this.detailInfo.filePath);
                        formData.append('fileRename', this.detailInfo.fileRename);
                        formData.append('fileSize', this.detailInfo.fileSize);
                        formData.append('fileType', this.detailInfo.fileType);
                        formData.append('isValid', this.detailInfo.isValid);
                        formData.append('sysOrgCode', this.detailInfo.sysOrgCode);
                        formData.append('updateBy', this.detailInfo.updateBy);
                        if (this.file) {
                            formData.append('file', this.file);
                        }
                    }
                    cxjsbBzwbAdd(formData).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            this.handleCancel();
                            this.onaxios();
                            if (this.type == 1) {
                                this.$message.success('添加成功');
                            } else {
                                this.$message.success('修改成功');
                            }
                        } else {
                            this.$message.error(data.message);
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.addBTn {
    margin-top: 20px;
    button {
        width: 88px;
        height: 32px;
        background: #3388EE;
        font-size: 16px;
        font-family: PingFangSCRegular;
        color: #FFFFFF;
        line-height: 22px;
    }
}
.tableList {
    padding-bottom: 30px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 60px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
    }
}
</style>
